<template>
  <div style="display: flex">
    <div class="question-info">
      <div class="question-info-left">
        <div class="quinfo-first">
          <h2>{{ questionsInfo.questionTitle }}</h2>
          <div class="question-info-icons">
            <span
              ><i class="iconfont">&#xe601;</i
              >{{ questionsInfo.questionNickname }}</span
            >
            <span
              ><i class="iconfont">&#xe64d;</i
              >{{ questionsInfo.updateTime | formatDate }}</span
            >
          </div>
        </div>
        <hr />
        <div class="quinfo-second">
          <p style="line-height: 1.5">
            {{ questionsInfo.questionContent }}
          </p>
        </div>
        <hr />
        <div class="quinfo-third">
          <el-form :model="commentForm" :rules="rules" ref="commentForm">
            <el-form-item prop="commentContext">
              <el-input
                id="commentText"
                v-model="commentForm.commentContext"
                class="question-info-note"
                type="textarea"
                :rows="8"
            /></el-form-item>
            <div class="question-info-message">
              <el-form-item prop="commentNickname">
                <el-input
                  v-model="commentForm.commentNickname"
                  placeholder="姓名"
                  style="height: 30px;"
                  minlength="30%"
                />
              </el-form-item>
              <el-form-item prop="commentEmail">
                <el-input v-model="commentForm.commentEmail" placeholder="邮箱"
              /></el-form-item>
              <el-button
                class="question-discuss"
                type="primary"
                size="mini"
                style="height: 40px"
                round
                @click.native="addCommentBtn()"
                >我来评论</el-button
              >
            </div>
          </el-form>
        </div>
        <div class="quinfo-four">
          <h4 style="margin-left: 10px">回复</h4>
          <span style="margin-left: 15px">|</span>
          <span style="margin-left: 5px"
            >共<span style="margin: 0 2px">{{ commentNum }}</span
            >条回复</span
          >
        </div>
        <div class="question-comment" v-if="questionsComment.length != 0">
          <div class="question-comment-container">
            <div class="question-comments">
              <div
                class="question-comment"
                v-for="(item, index) in questionsComment"
                :key="item.commentId"
              >
                <div class="question-comment-img">
                  <img :src="item.commentAvatar" />
                </div>
                <div class="question-content">
                  <div class="question-comment-name">
                    <span class="question-author-name">{{
                      item.commentNickname
                    }}</span>
                    <div class="question-pointing" v-if="item.isArticler">
                      博主
                    </div>
                    <span class="question-metadata">{{
                      item.createTime | formatDate
                    }}</span>
                  </div>

                  <div class="question-comment-text">
                    {{ item.commentContext }}
                  </div>
                  <div class="question-actions">
                    <el-button
                      type="text"
                      class="question-reply-btn"
                      style="color: #c1c1c1"
                      @click.native="
                        replyCommentBtn(item.commentId, item.commentNickname)
                      "
                      >回复</el-button
                    >
                    <div
                      style="
                        display: inline-block;
                        margin-left: 10%;
                        color: #c1c1c1;
                      "
                    >
                      <i
                        class="iconfont"
                        v-show="item.replyComments.length > 0"
                        v-if="item.inOpen"
                        >&#xeb93;</i
                      ><i
                        class="iconfont"
                        v-show="item.replyComments.length > 0"
                        v-else
                        >&#xeb95;</i
                      ><el-button
                        v-show="item.replyComments.length > 0"
                        type="text"
                        style="color: #c1c1c1; font-weight: small"
                        v-if="item.inOpen"
                        @click="handleOpen(index, item.inOpen)"
                        >收起</el-button
                      >
                      <el-button
                        v-show="item.replyComments.length > 0"
                        type="text"
                        style="color: #c1c1c1; font-weight: small"
                        v-else
                        @click="handleOpen(index, item.inOpen)"
                        >展开</el-button
                      >
                    </div>
                  </div>
                </div>
                <div
                  class="question-comments question-comments-reply"
                  v-show="item.inOpen"
                >
                  <div
                    class="question-comment"
                    v-for="item in item.replyComments"
                    :key="item.commentId"
                  >
                    <div class="question-comment-img">
                      <img :src="item.commentAvatar" />
                    </div>
                    <div class="question-content">
                      <div class="question-comment-name">
                        <span class="question-author-name">{{
                          item.commentNickname
                        }}</span>
                        <div class="question-pointing" v-if="item.isArticler">
                          博主
                        </div>
                        <span style="padding:5px;">回复</span>
                        <span> @{{ item.parentComment.commentNickname }}</span>
                        <div class="question-metadata">
                          <span>{{ item.createTime | formatDate }}</span>
                        </div>
                      </div>

                      <div class="question-comment-text">
                        {{ item.commentContext }}
                      </div>
                      <div class="question-actions">
                        <el-button
                          type="text"
                          class="question-reply-btn"
                          style="color: #c1c1c1;padding:5px;"
                          @click.native="
                            replyCommentBtn(
                              item.commentId,
                              item.commentNickname
                            )
                          "
                          >回复</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <p
            style="
              text-align: center;
              color: #717171;
              margin-top: 5%;
              font-family: STXingkai;
              font-size: 25px;
            "
          >
            暂无评论，快来发表评论吧！
          </p>
        </div>

        <!-- 你看看 about的 有一个v-if  如果不存在则不渲染 -->
      </div>
      <releaseNav :isVisible="false"></releaseNav>
    </div>
  </div>
</template>

<script>
import "@/assets/css/question-info.css";
import {
  getQuestionInfo,
  getQuestionsComment,
  addComment,
} from "@/api/questions";
import { formatDate } from "@/utils/date";
import releaseNav from "@/components/releaseNav.vue";

const comment = {
  commentId: null,
  commentNickname: "",
  commentAvatar: null,
  commentEmail: "",
  commentContext: "",
  articleId: null,
  questionsId: null,
  parentCommentId: null,
  isArticler: null,
  commentType: 3,
  commentStatus: null,
  createTime: null,
  updateTime: null,
  isNotice: false,
};

export default {
  components: { releaseNav },
  name: "question-info",
  data() {
    var checkEmail = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        //如果输入为空直接返回
        callback();
      } else {
        //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
        if (reg.test(value)) {
          //匹配成功返回
          callback();
        } else {
          //匹配不成功返回错误显示
          callback(new Error("网址格式有问题！"));
        }
      }
    };
    return {
      commentForm: Object.assign({}, comment),
      questionsComment: [],
      commentNum: 0,
      questionId: 0,
      parentId: 0,
      questionsInfo: {},
      commentType: true,
      rules: {
        commentContext: [
          { required: true, message: "请输入内容", tigger: "change" },
          { max: 1024, message: "最多 1024 个字符", tigger: "blur" },
        ],
        commentNickname: [
          { required: true, message: "请输入你的姓名", trigger: "change" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        commentEmail: [
          { required: true, validator: checkEmail, trigger: "change" },
        ],
      },
    };
  },
  components: {
    releaseNav,
  },
  created() {
    this.questionId = this.$route.query.questionId;
    this.getQuestionInfoFun();
    this.getQuestionsCommentFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getQuestionInfoFun() {
      const params = {
        questionId: this.questionId,
      };
      getQuestionInfo(params).then((response) => {
        console.log(response, "打印");
        this.questionsInfo = response.data;
      });
    },
    getQuestionsCommentFun() {
      getQuestionsComment(this.questionId).then((response) => {
        this.questionsComment = response.data;
        // 获取评论的数量
        var num = 0;
        this.questionsComment.map((item) => {
          num = num + item.replyComments.length;
        });
        this.commentNum = num + this.questionsComment.length;
      });
    },
    handleOpen(index, inOpen) {
      // 修改展开
      this.questionsComment[index].inOpen = !inOpen;
    },
    replyCommentBtn(parentId, commentNickname) {
      var commentText = document.getElementById("commentText");
      document.documentElement.scrollTop = commentText.offsetTop;
      commentText.focus();
      commentText.setAttribute("placeholder", "@" + commentNickname);
      this.parentId = parentId;
      this.commentType = false;
    },
    addCommentBtn() {
      this.$refs.commentForm.validate((valid) => {
        if (valid) {
          this.commentForm.questionsId = this.questionId;
          this.commentForm.parentCommentId = 0;
          if (!this.commentType) {
            this.commentForm.parentCommentId = this.parentId;
          }
          addComment(this.commentForm).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "评论成功！",
                type: "success",
              });
              // 需要重新加载
              this.getQuestionsCommentFun();
            } else {
              this.$message({
                message: "评论失败！",
                type: "warning",
              });
            }
          });
        }
      });
      this.resetData();
    },
    resetData() {
      this.commentForm = this.$options.data().commentForm;
      this.parentId = 0;
    },
  },
};
</script>

<style></style>
